<template>
    <div v-for="(itemTwo, index) in item.children" :key="index">
        <!-- 如果没有子菜单，直接渲染链接 -->
        <div class="router_item" v-if="!itemTwo.children">
            <router-link :to="itemTwo.router" :class="routerActive == itemTwo.router ? 'routerActive' : 'notRouterActive'"> {{ $t(itemTwo.name) }}</router-link>
        </div>
        <!-- 如果有子菜单，使用 Poptip 递归渲染 -->
        <Poptip v-else transfer placement="right-start" trigger="hover"  popper-class="menu_pop_deep">
            <div class="deep_content">
                <div></div>
                <div class="title">{{ $t(itemTwo.name) }}</div>
                <Icon type="ios-arrow-forward" size="16" />
            </div>
            <template #content>
                <pop-item :item="itemTwo" /> <!-- 递归传递子菜单 -->
            </template>
        </Poptip>
    </div>
</template>

<script>
export default {
    name: 'PopItem',
};
</script>
<script setup>
import { useRouter } from 'vue-router'
import { ref, defineProps, watch } from 'vue'

const props = defineProps({
    item: Object
})

// 路由
const router = useRouter();

// 菜单激活状态
const routerActive = ref('');
routerActive.value = router.currentRoute.value.path;

// 监听路由变化
watch(
    () => router.currentRoute.value,
    (val) => {
        routerActive.value = val.path
    }
)
</script>

<style scoped lang="scss">
// .title {
//     width: 100px;
//     white-space: break-spaces;
// }
</style>